<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/res/layui/css/layui.css"  media="all">
    <link rel="shortcut icon" href="#"/>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<h3 id="userName" style="text-align: center"></h3>
<div class="demoTable">
    搜索名字：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="commname" autocomplete="off">
    </div>
    搜索价格：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="min" autocomplete="off">
    </div>
    <div class="layui-inline">
        <input class="layui-input" name="id" id="max" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload" id="quryBtu">搜索</button>
    <button class="layui-btn" data-type="reload" id="toTrolley">我的购物车</button>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">加入购物车</a>
    <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
</script>
<script src="/res/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<!--图片的自定义模板-->
<script type="text/html" id="coImgTpl">
    <img src="{{d.coimg}}" alt="图片" onclick="showImage('{{d.coimg}}')">
</script>
<script>
    var $ = layui.$;
    var table=null;
    var layer =null;

    let user =JSON.parse(sessionStorage.getItem("user"));
    if (user==null){
        location.href="/pages/login.html";
    }
    $("#userName").html("尊敬的"+user.username+"先生，欢迎光临本店");
    console.info(user);
    var commDate=null;
    //加载模块
    layui.use(function(){ //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
        //得到各种内置组件
        layer = layui.layer //弹层
            ,laypage = layui.laypage //分页
            ,laydate = layui.laydate //日期
            ,table = layui.table //表格
            ,carousel = layui.carousel //轮播
            ,upload = layui.upload //上传
            ,element = layui.element //元素操作
            ,slider = layui.slider //滑块
            ,dropdown = layui.dropdown //下拉菜单



        //监听Tab切换
        element.on('tab(test)', function(data){
            layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
                tips: 1
            });
        });
        //日期范围
        laydate.render({
            elem: '#test6'
            //设置开始日期、日期日期的 input 选择器
            //数组格式为 5.3.0 开始新增，之前版本直接配置 true 或任意分割字符即可
            ,range: ['#test-startDate-1', '#test-endDate-1']
        });
        layui.use('table', function(){
            table = layui.table;
            table.render({
                elem: '#test'
                ,url:'/sCommodity/showList'
                ,page: true //开启分页
                ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                ,totalRow: true //开启合计行
                ,cols: [[
                    {type:'checkbox'}
                    ,{field:'coid', width:80, title: 'ID', sort: true}
                    ,{field:'coname', width:80, title: '商品名字'}
                    ,{field:'comoney', width:80, title: '价格', sort: true,totalRow: true}
                    ,{field:'coimg', width:80, title: '图片', templet:'#coImgTpl'}
                    ,{field:'coremark', title: '描述', width: 180,}

                    ,{fixed: 'right', width: 250, align:'center', toolbar: '#barDemo'}
                ]]
                ,id: 'testReload'
                ,page: true
            });
            //监听头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id)
                    ,data = checkStatus.data; //获取选中的数据
                switch(obj.event){
                    case 'add':
                        //layer.msg('添加');
                        //iframe层

                        layer.open({
                            type: 2,
                            title: '添加修改页',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['380px', '90%'],
                            content: '/pages/addCommodity.html' //iframe的url
                        });

                        break;
                    case 'update':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        } else if(data.length > 1){
                            layer.msg('只能同时编辑一个');
                        } else {
                            //layer.alert('编辑 [id]：'+ checkStatus.data[0].fId);
                            let datad = checkStatus.data[0];
                            commDate=checkStatus.data[0];
                            console.info(commDate);
                            layer.open({
                                type: 2,
                                title: '添加修改页',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['380px', '90%'],
                                content: '/pages/addCommodity.html'//iframe的url
                            });

                        }
                        break;
                    case 'delete':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        } else {
                            layer.confirm('真的删除行么', function(index){
                                //向服务端发送删除指令
                                let ids = "";
                                for (let i = 0; i < data.length; i++) {
                                    ids +=data[i].coid+",";
                                }
                                console.info(ids);
                                ids = ids.substring(0,ids.length-1);

                                let url = "/sCommodity/deleteBatch";
                                let dataa = {ids:ids};
                                $.post(url,dataa,function (res) {
                                    if(res.resp==1){
                                        layer.msg("删除"+data.length+"条数据成功");
                                        table.reload('testReload');
                                    }else if(res==0){
                                        layer.msg("删除失败");
                                    }
                                },"json")
                                //location.reload();

                            });
                        }

                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
                if(layEvent === 'detail'){
                    layer.msg('加入购物车');
                    //加入代码
                    let url = "/sTrolley/addAndUpdate";
                    let dataa = {"userid":user.userid,"coid":data.coid};
                    $.post(url,dataa,function (res) {
                        if(res.resp==1){
                            layer.msg("加入成功!");
                        }else {
                            layer.msg("加入失败!");
                        }
                    },"json")


                } else if(layEvent === 'more'){
                    //下拉菜单
                    dropdown.render({
                        elem: this //触发事件的 DOM 对象
                        ,show: true //外部事件触发即显示
                        ,data: [{
                            title: '编辑'
                            ,id: 'edit'
                        },{
                            title: '删除'
                            ,id: 'del'
                        }]
                        ,click: function(menudata){
                            if(menudata.id === 'del'){
                                layer.confirm('真的删除行么', function(index){
                                    obj.del(); //删除对应行（tr）的DOM结构
                                    layer.close(index);
                                    //向服务端发送删除指令
                                    let url = "/sCommodity/delete";
                                    let dataa = {"coid":data.coid,"userid":user.userid};
                                    $.post(url,dataa,function (res) {
                                        if(res.resp==1){
                                            layer.msg("删除成功!");
                                        }else {
                                            layer.msg("删除失败!");
                                        }
                                    },"json")
                                });
                            } else if(menudata.id === 'edit'){
                                //layer.msg('编辑操作，当前行 ID:'+ data.fId);
                                commDate=data;
                                console.info(commDate);
                                layer.open({
                                    type: 2,
                                    title: 'layer mobile页',
                                    shadeClose: true,
                                    shade: 0.8,
                                    area: ['380px', '90%'],
                                    content: '/pages/addCommodity.html'//iframe的url
                                });
                            }
                        }
                        ,align: 'right' //右对齐弹出（v2.6.8 新增）
                        ,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                    })
                }
            });
            laypage.render({
                elem: 'pageDemo' //分页容器的id
                ,count: 1000 //数据总数
                ,limit: 10 //每页显示的数据条数
                ,skin: '#1E9FFF' //自定义选中色值
                //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
                ,jump: function(obj, first){
                    if(!first){
                        layer.msg('第'+ obj.curr +'页', {offset: 'b'});
                    }
                }
            });
        });
        $('#quryBtu').on("click",function () {

            //执行重载
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    coname:$("#commname").val(),
                    min:$("#min").val(),
                    max:$("#max").val(),
                }
            })
        });

        $('#toTrolley').on("click",function () {
            //进入购物车
            location.href="/pages/trolley.html";

        });

    });
    function closeLayer() {
        layer.closeAll();
        table.reload('testReload');
        layer.msg("操作成功");
    }

    /**
     * 显示图片的预览
     * @param url
     */
    function showImage(url) {
        //页面层
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['640px', '320px'], //宽高
            content: '<img src="' + url + '" alt="预览图片" width="640" height="320">'
        });
    }
</script>

</body>
</html>